import React,{useState} from 'react'


import PropTypes from 'prop-types'

import { Icon, Modal, Button, WingBlank } from 'antd-mobile'

import Portrait from '@a/images/dengji/椭圆1@2x.png'

import { Container } from './StyledFormInfo'


const PersonalInfoUi = (props) => {
    

    let infoList = JSON.parse(sessionStorage.username)
    let obj = {
        ...infoList,
        ...props.list.location.state,
        ...props.state, 
    }
    sessionStorage.setItem("username",JSON.stringify(obj))
    // console.log(infoList);

    // let [state,setState] = useState({
    //     infoList
    // })
    // console.log(state.infoList);

    // if(props.list.location.state){
    //     forceUpdate()
    // }

    
    const alert = Modal.alert;

    return (
        <Container>
            <form>
                <div className="info">
                    <span>头像</span>
                    <div
                        className="img"
                        onClick={props.onImgClick(infoList)}
                    >
                        <img src={infoList.uhead || `${Portrait}`} alt="" />
                    </div>
                    <p>{<Icon type="right" />}</p>
                </div>
                <div className="title">
                    <span>姓名</span>
                    <p onClick={props.onInfoClick(infoList)}>{infoList.uname}</p>
                    <i>{<Icon type="right" />}</i>
                </div>
                <div className="title">
                    <span>性别</span>
                    <WingBlank >
                        <Button onClick={props.onBtnClick(["男","女","取消"])}>{props.state.sex === '未设置' ? infoList.sex : props.state.sex}</Button>
                    </WingBlank>
                    <i>{<Icon type="right" />}</i>
                </div> 
                <div className="text">
                    <span>学号</span>
                    <p>14775944</p>
                </div>
                <div className="text"> 
                    <span>学科</span>
                    <p>{infoList.xveke}</p>
                </div>
                <div className="title">
                    <span>教龄</span>
                    <WingBlank >
                        <Button onClick={props.onBtnClick(["1年以内","1~3年","3~5年","5~10年","10年以上","取消"])}>{props.state.age}</Button>
                    </WingBlank>
                    <i>{<Icon type="right" />}</i>
                </div>
                <div className="text">
                    <span>学校</span>
                    <p>{infoList.school}</p>
                </div>
                <div className="title">
                    <span>职位</span>
                    <WingBlank >
                        <Button onClick={props.onBtnClick(["教师","班主任","年级组长","教研组长","副校长","校长","教研员","其他","取消"])}>{infoList.zhiwei || props.state.zhiwei}</Button>
                    </WingBlank>
                    <i>{<Icon type="right" />}</i>
                </div>
                <div className="title"> 
                    <span>教师认证</span>
                    <WingBlank size="lg">
                        <Button
                            onClick={() =>
                                alert(
                                    '认证条件',
                                    <div>
                                        <p>1、设置姓名并绑定手机 </p>
                                        <p>2、至少8名学生,每人完成3次作业</p>
                                        <p>3、至少3名学生,每人绑定了手机</p>
                                    </div>,
                                    [
                                        { text: '确认'},
                                    ])
                            }
                        >
                            {infoList.renzheng === 1 ? '未认证' : '已认证'}
                        </Button>
                    </WingBlank>
                    <i>{<Icon type="right" />}</i>
                </div>
                <div className="text">
                    <span>手机号<i style={{ color: "#ccc" }}>(不可更改)</i></span>
                    <p>18235444103</p>
                </div>
                <div className="title"
                    onClick={props.onEmerClick(infoList)}
                >
                    <span>紧急联系人</span>

                    <i>{<Icon type="right" />}</i>
                </div>
                <div className="title"
                    onClick={props.onAccountClick(infoList)}
                >
                    <span>账号信息</span>

                    <i>{<Icon type="right" />}</i>
                </div> 
                <div className="title" 
                    onClick={props.onQRcodeClick(infoList)}
                >
                    <span>我的二维码</span>

                    <i>{<Icon type="right" />}</i>
                </div>
            </form>
        </Container>
    )
}

// PersonalInfoUi.prototypes = {
//     list: PropTypes.array
// }


export default PersonalInfoUi
